<template>
	<div class="message-menu">
		<div class="message-menu-item" v-for="(item, id) in newList" v-show="item.totalCount" :key="id" @click="goto(item, id)" :class="{ active: active == id }">
			<div class="type-left">
				<div class="type-icon">
					<div class="icon-back" :style="item.bgcolor">
						<span class="iconfont" :class="item.icon"></span>
					</div>
				</div>
				<div class="sum-num">
					<div class="num">{{ item.totalCount }}</div>
					<span>条</span>
				</div>
				<div class="type-name">{{ item.name }}</div>
			</div>
			<div class="type-right">
				<div class="warn">
					<span>紧急消息</span>
					<div class="rightnum">{{ item.emergencyCount }}</div>
				</div>
				<div class="important">
					<span>重要消息</span>
					<div class="rightnum">{{ item.importantCount }}</div>
				</div>
				<div class="general">
					<span>一般消息</span>
					<div class="rightnum">{{ item.generalCount }}</div>
				</div>
			</div>
		</div>
		<!-- <div style="height: 126px;"
    class="message-menu-item worksize"
    :class="{ active: active == 3 }"
    @click="work">
    工作计划
    </div> -->
	</div>
</template>

<script>
	import { msgAmount } from '@/system/api/message'
	export default {
		name: 'messageType',
		props: {},
		components: {},
		data() {
			return {
				bgdcolor: false,
				active: 0,
				newList: [],
				messageTypeList: [
					{
						icon: 'iconxitongpingtai-xiaoxizhongxin-daibanliucheng',
						bgcolor: 'background:rgba(245,195,101,1);',
					},
					{
						icon: 'iconxitongpingtai-xiaoxizhongxin-daibanyewu',
						bgcolor: 'background:rgba(249, 73, 99,1);',
					},
					{
						icon: 'iconxitongpingtai-xiaoxizhongxin-yujingxiaoxi',
						bgcolor: 'background:rgba(111,178,117,1);',
					},
					{
						icon: 'iconxitongpingtai-xiaoxizhongxin-gonggaoxinxi',
						bgcolor: 'background:rgba(73,121,237,1);',
					},
					{
						icon: 'iconxitongpingtai-xiaoxizhongxin-xinshixinxi',
						bgcolor: 'background:rgba(222,125,98,1);',
					},
					{
						icon: 'iconxitongpingtai-xiaoxizhongxin-duanxinxiaoxi',
						bgcolor: 'background:rgba(204,204,204,1);',
					},
				],
			}
		},
		watch: {},
		methods: {
			goto: function(type, i) {
				this.bgdcolor = false
				this.active = i
				this.$emit('goto', type, i)
			},
			async getList() {
				await msgAmount().then(res => {
					for (var i = 0; i < res.info.length; i++) {
						this.messageTypeList[i].id = res.info[i].id
						this.messageTypeList[i].name = res.info[i].name
						this.messageTypeList[i].totalCount = res.info[i].totalCount ? res.info[i].totalCount : 0
						this.messageTypeList[i].emergencyCount = res.info[i].emergencyCount ? res.info[i].emergencyCount : 0
						this.messageTypeList[i].importantCount = res.info[i].importantCount ? res.info[i].importantCount : 0
						this.messageTypeList[i].generalCount = res.info[i].generalCount ? res.info[i].generalCount : 0
					}
					this.newList = Object.assign({}, this.messageTypeList)
				})
			},
			work() {
				this.bgdcolor = true
				this.$emit('work')
				this.active = 3
			},
		},
		mounted() {
			// this.getList();
		},
	}
</script>

<style lang="scss" scoped>
	.message-menu {
		height: 100%;
		min-width: 234px;
		width: 234px;
		padding: 5px 3px 0px 3px;
		overflow-y: auto;
	}

	.message-menu-item {
		display: flex;
		flex-direction: row;
		height: 126px;
		background: rgba(255, 255, 255, 1);
		margin-bottom: 12px;
		box-shadow: 0px 3px 18px 0px rgba(0, 57, 151, 0.1);
		border-radius: 6px;
		color: rgba(51, 51, 51, 1);
		cursor: pointer;
	}

	.message-menu-item:hover {
		background: var(--button-hover-back-color);
		box-shadow: 0px 3px 18px 0px rgba(0, 57, 151, 0.1);
		color: var(--button-active-text-color);
	}

	.icon-back {
		width: 40px;
		text-align: center;
		height: 40px;
		border-radius: 50%;
		line-height: 40px;
	}

	.icon-back .iconfont {
		font-size: 24px;
		color: rgba(255, 255, 255, 1);
	}

	.message-menu-item:hover .icon-back,
	.message-menu-item.active .icon-back {
		background: var(--button-active-text-color) !important;
	}

	.message-menu-item:hover .icon-back .iconfont,
	.message-menu-item.active .icon-back .iconfont {
		color: var(--button-active-back-color);
	}

	.message-menu-item:hover span {
		font-weight: 400;
		color: var(--button-active-text-color);
	}

	.message-menu-item:hover .num,
	.message-menu-item:hover .rightnum {
		font-weight: bold;
		color: var(--button-active-text-color);
	}

	.active,
	.active:hover {
		background: var(--button-active-back-color);
		box-shadow: 0px 3px 18px 0px rgba(0, 57, 151, 0.1);
		font-weight: 400;
		color: var(--button-active-text-color);
	}

	.message-menu-item.active span {
		font-weight: 400;
		color: var(--button-active-text-color);
	}

	.message-menu-item.active .num,
	.message-menu-item.active .rightnum {
		font-weight: bold;
		color: var(--button-active-text-color);
	}

	.type-left {
		width: 50%;
		display: flex;
		flex-direction: column;
		margin: 12px 12px 19px 12px;
		text-align: left;
	}

	.sum-num {
		display: flex;
		flex-direction: row;
	}

	.sum-num span {
		width: 25px;
		height: 14px;
		margin: 14px 6px 0px 0px;
	}

	.sum-num .num {
		width: 55px;
		height: 20px;
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 21px;
		margin: 11px 0px 9px 4px;
	}

	.type-right {
		width: 50%;
	}

	.type-right .warn,
	.type-right .important,
	.type-right .general {
		display: flex;
		flex-direction: row;
		height: 16px;
		margin: 19px 15px 0 0;
	}

	.warn span,
	.general span,
	.important span {
		width: 60px;
		height: 15px;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 21px;
		margin-left: 9px;
	}

	.rightnum {
		width: 25px;
		height: 16px;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: rgba(102, 102, 102, 1);
		line-height: 21px;
	}
	.worksize {
		display: block;
		font-size: 25px;
		line-height: 126px;
		text-align: center;
	}
</style>
